[React] antd 라이브러리 Button 컴포넌트 알아보기

최근 react에 사용하는 antd UI 라이브러리 업데이트를 계속해서 포스트중입니다. 오늘 내용은 antd의 Button 컴포넌트에 대하여 알아봅니다.

# antd Button 컴포넌트

react 앱에서 버튼의 기능과 화면 구현을 목적으로 antd의 Button 컴포넌트가 사용됩니다. Button 컴포넌트를 사용하여 방문자의 클릭 등의 요청에 필요한 기능을 구현하거나 필요한 정보를 서버에 요청할 수 있습니다.

<Button />


antd의 Button 컴포넌트는 기본적으로 아래의 5가지의 타입을 가지고 있습니다.

- Primary  //  주요 기능에 사용 됨. 업데이트 등등
- Default  //  Primary가 주요 기능인 경우 그 외의 목적 등에 사용 가능
- Dashed  //  Dashed 테두리 스타일
- Text  //  클릭 기능의 텍스트 형태 버튼
- Link  //  외부 링크 목적

아래는 Button 컴포넌트에 사용할 수 있는 property 정보입니다.

href  //  이동하게 될 링크 url
block  // 부모 크기에 맞추어 width 값을 가짐
danger  // 삭제 등 위험 요소에 사용되는 버튼 (빨간색)
disabled  //  <boolean> 비활성화 상태 여부
ghost  //  <boolean> 배경색과 텍스트 색의 서로 전환됨. 배경색 transparent
icon  //  <ReactNode> 버튼과 함께 사용할 아이콘
shape  //  <circle | round> 도형 형태
type // Button 타입을 지정할 때 사용(primary 등등)

onClick  //  클릭시 콜백 함수를 호출

여기까지 antd Button 컴포넌트에 사용되는 타입 및 프로퍼티 정보를 알아봤습니다. 아래에서 간단한 예제를 만들어보겠습니다.

! antd Button 컴포넌트 예제

아래는 몇 가지 형태의 버튼 컴포넌트를 사용한 예제들입니다.

가장 기본적인 모습의 Button 컴포넌트 예제입니다. 클래스를 추가하였고 클릭시 this.showAlert 콜백함수를 호출하게됩니다.


@ 비활성화 버튼 사용하기
비활성화 버튼인 경우 disabled에 true을 적용합니다.

이제 클릭이 되지 않으며 마우스 오버 스타일도 나타나지 않게 됩니다.


@ 아이콘 이미지를 가지는 버튼의 경우
만약 아이콘을 추가할 경우 아래처럼 사용할 수 있죠.

해당하는 아이콘에 버튼에 함께 출력되게 됩니다.


여기까지 antd의 Button 컴포넌트에 대하여 알아봤습니다.